<!-- 前台店长 – 首页 – 会员考勤			Members -->
<template>
	<view class="warps">
		<view>
			<mSearch :show="false" @search="search($event,1)" :mode="2" radius="5"></mSearch>
		</view>
		<view class="w90s f ">
			<view class="flexR">
				<view class="">
					<view class="he tac">姓名</view>
					<view v-for="(item,index) in 20" @click="a">
						<view class="he tac">李某</view>
					</view>
				</view>
				<view class="">
					<view class="he1 tac">性别</view>
					<view class=""　 @click="a" v-for="(item,index) in 3">
						<view class="he1 tac">男</view>
					</view>
					<view class=""  @click="a" v-for="(item,index) in 7">
						<view class="he1 tac">女</view>
					</view>
					<view class=""  @click="a" v-for="(item,index) in 3">
						<view class="he1 tac">男</view>
					</view>
					<view class=""  @click="a" v-for="(item,index) in 7">
						<view class="he1 tac">女</view>
					</view>
				</view>
			</view>
			<view class="" style="position:relative;">
				<view class="Members-biaoges lan senter ">
					<text class="bold">2021年上课次数(月/次)</text>
					<image style="width: 16rpx;height: 16rpx;" src="../../../../static/img/102.png" mode=""></image>
				</view>
				<view v-if="show == true">
					<view class="teaching-lan">
						<view>
							<view class=" senter p_t_20">
								<text>2021年</text>
							</view>
							<view class="quanxian"></view>
						</view>
						<view>
							<view class=" senter p_t_20">
								<text>2020年</text>
							</view>
							<view class="quanxian"></view>
						</view>
						<view>
							<view class=" senter p_t_20">
								<text>2019年</text>
							</view>
							<view class="quanxian"></view>
						</view>
						<view>
							<view class=" senter p_t_20">
								<text>2019年</text>
							</view>
							<view class="quanxian"></view>
						</view>
					</view>
				</view>
				<view class="Members-biaoges lan senter" @click="geta()">
					<text class="bold">4月</text>
					<image style="width: 16rpx;height: 16rpx;" src="../../../../static/img/102.png" mode=""></image>
				</view>
				<view v-if="showa == true">
					<view class="teaching-lans">
						<view>
							<view class=" senter p_t_20">
								<text>4月</text>
							</view>
							<view class="quanxian"></view>
						</view>
						<view>
							<view class=" senter p_t_20">
								<text>3月</text>
							</view>
							<view class="quanxian"></view>
						</view>
						<view>
							<view class=" senter p_t_20">
								<text>2月</text>
							</view>
							<view class="quanxian"></view>
						</view>
						<view>
							<view class=" senter p_t_20">
								<text>1月</text>
							</view>
							<view class="quanxian"></view>
						</view>
					</view>
				</view>
				<view class="Members-biaoge senter" v-for="(item,index) in 20" :key="index">
					<text>4</text>
				</view>
			</view>
		</view>
		<view class="p30"></view>
	</view>
</template>

<script>
	import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';
	import wybTable from '@/components/wyb-table/wyb-table.vue';
	export default {
		components: {
			wybTable,
			mSearch
		},
		data() {
			const theUrl = '/pages/demos/noticeBar-demo/more' // 本地的某个页面
			const httpUrl = 'https://ext.dcloud.net.cn/plugin?id=2667' // 某个网址
			return {
				show: false,
				showa: false,
				province: [],
				val2: '',
				placeholder: '请输入搜索内容',
				headers: [{
						label: '姓名',
						key: 'name',
					}, {
						label: '性别',
						key: 'age'
					},
					// {
					// 	label: '学院',
					// 	key: 'collage'
					// }
				],
				contents: [{
						name: '刘一',
						age: '男',
						collage: '信息学院'
					}, {
						name: '陈二',
						age: '女',
						collage: '4'
					}, {
						name: '张三',
						age: '男',
						collage: '学院'
					}, {
						name: '李四',
						age: '女',
						collage: '城市'
					}, {
						name: '王五',
						age: '男',
						collage: '旅游'
					}, {
						name: '赵六 ',
						age: '男',
						collage: ''
					}, {
						name: '孙七',
						age: '男',
						collage: ''
					}, {
						name: '周八 ',
						age: '男',
						collage: '会计学院'
					}, {
						name: '吴九 ',
						age: '男',
						collage: ''
					}, {
						name: '郑十',
						age: '男',
						collage: ''
					},
					{
						name: '郑十',
						age: '男',
						collage: ''
					},
					{
						name: '郑十一',
						age: '男',
						collage: ''
					},
					{
						name: '郑十二',
						age: '男',
						collage: ''
					},
					{
						name: '郑十三',
						age: '男',
						collage: ''
					},
					{
						name: '郑十四',
						age: '男',
						collage: ''
					},
					{
						name: '郑十',
						age: '男',
						collage: '',
					},
					{
						name: '郑十',
						age: '男',
						collage: ''
					},
					{
						name: '郑十',
						age: '男',
						collage: ''
					},
					{
						name: '郑十',
						age: '男',
						collage: ''
					},
					{
						name: '郑十',
						age: '男',
						collage: ''
					},
				],
				// urlCol: [{
				// 	type: 'route',
				// 	key: 'url'
				// }, {
				// 	type: 'http',
				// 	key: 'link'
				// }]
			}
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '会员考勤'
			})
		},
		methods: {
			get() {
				this.show = !this.show
			},
			geta() {
				this.showa = !this.showa
			},
			a() {
				uni.navigateTo({
					url: "../attendance/attendance"
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.he {
		width: 175rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #BFDBF1;
		border: 1rpx solid #FFFFFF;
	}

	.he1 {
		width: 90rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #BFDBF1;
		border: 1rpx solid #FFFFFF;
	}


	.warps {
		/* height:120vh; */
		overflow: hidden;
		background-color: #fff;
	}

	.lan {
		background: #BFDBF1;
	}

	.teaching-lan {
		width: 188rpx;
		height: 318rpx;
		opacity: 1;
		background: #f1f6ff;
		border-radius: 8rpx;
		position: absolute;
		top: 40rpx;
		left: 160rpx;
		z-index: 99;
	}

	.teaching-lans {
		width: 188rpx;
		height: 318rpx;
		opacity: 1;
		background: #f1f6ff;
		border-radius: 8rpx;
		position: absolute;
		top: 75rpx;
		left: 160rpx;
		z-index: 99;
	}

	.Members-biaoge {
		width: 350rpx;
		height: 37.5rpx;
		line-height: 37.5rpx;
		border: 2rpx solid #f3f3f3;
		font-size: 16rpx;
	}

	.Members-biaoges {
		width: 350rpx;
		height: 37.5rpx;
		line-height: 37.5rpx;
		border: 2rpx solid #f3f3f3;
		font-size: 16rpx;
	}

	.Members-biaoge {
		width: 350rpx;
		height: 70rpx;
		line-height: 70rpx;
		border: 2rpx solid #f3f3f3;
		font-size: 16rpx;
	}

	#lineTd {
		background: #fff url() no-repeat 100% center;
	}
</style>
